<template>
  <div class="cs-page-container">
    <el-button type="primary" @click="addRequest">添加接口</el-button>
    <el-dialog title="添加接口" :visible.sync="requestDialog">
      <el-form :model="requestItem">
        <el-form-item label="url" :label-width="'100px'">
          <el-input v-model="requestItem.url" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="接口名" :label-width="'100px'">
          <el-input v-model="requestItem.requestName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="url参数" :label-width="'100px'">
          <template v-for="(item, index) in requestItem.params">
            <div :key="index">
              <el-input
                v-model="requestItem.params[index].name"
                size="small"
                placeholder="请输入参数名"
                style="width: 180px"
              >
              </el-input>
              <el-input
                v-model="requestItem.params[index].value"
                size="small"
                placeholder="请输入参数值"
                style="width: 200px"
              >
              </el-input>
              <el-button
                type="danger"
                size="small"
                @click="deleteRequestParam(item)">
                删除
              </el-button>
            </div>
          </template>
          <el-button @click="requestItem.params.push({ name: '', value: null })">新增一项</el-button>
        </el-form-item>
        <el-form-item label="body参数" :label-width="'100px'">
          <template v-for="(item, index) in requestItem.data">
            <div :key="index">
              <el-input
                v-model="requestItem.data[index].name"
                size="small"
                placeholder="请输入参数名"
                style="width: 180px"
              >
              </el-input>
              <el-input
                v-model="requestItem.data[index].value"
                size="small"
                placeholder="请输入参数值"
                style="width: 200px"
              >
              </el-input>
              <el-button
                type="danger"
                size="small"
                @click="deleteBodyParam(item)">
                删除
              </el-button>
            </div>
          </template>
          <el-button @click="requestItem.data.push({ name: '', value: null })">新增一项</el-button>
        </el-form-item>
        <el-form-item label="请求方式" :label-width="'100px'">
          <el-select v-model="requestItem.model" filterable placeholder="请求方式">
            <el-option :label="'get'" :value="'get'"></el-option>
            <el-option :label="'post'" :value="'post'"></el-option>
            <el-option :label="'put'" :value="'put'"></el-option>
            <el-option :label="'delete'" :value="'delete'"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="自动请求" :label-width="'100px'">
          <el-select v-model="requestItem.isAutoRequest" filterable placeholder="是否再页面打开时自动请求">
            <el-option :label="'是'" :value="true"></el-option>
            <el-option :label="'否'" :value="false"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="成功提示语" :label-width="'100px'">
          <el-input v-model="requestItem.message" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="requestDialog = false">取 消</el-button>
        <el-button type="primary" @click="_addRequest">确 定</el-button>
      </div>
    </el-dialog>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 230px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >
        <el-table-column align="center" label="接口名" prop="requestName" />
        <el-table-column align="center" label="host" prop="host" />
        <el-table-column align="center" label="自动请求" prop="isAutoRequest" />
        <el-table-column align="center" label="url" prop="url" />
        <el-table-column align="center" label="请求成功后提示" prop="message" />
        <el-table-column align="center" label="请求方式" prop="model" />
        <!-- <el-table-column align="center" label="url参数" prop="params" /> -->
        <!-- <el-table-column align="center" label="body参数" prop="data" /> -->
        <el-table-column align="center" label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="primary"
              @click="handleRequestEditClicked(row)">编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import {
  xhrAddRequest, xhrRequestList
} from '@/api/page'
import { deepCopy } from 'ali-oss/lib/common/utils/deepCopy';
export default {
name: 'AddRequest',
  data() {
    return {
      requestItem: {},
      requestDialog: false,
      list: []
    }
  },

  created() {
    this.doSearch()
  },

  methods: {
    doSearch: function() {
      xhrRequestList().then(resp => {
        this.list = resp.data.list
      }).catch(err => {
        this.$message.error(err)
      })
    },
    addRequest: function() {
      this.requestDialog = true
      this.requestItem = { url: '', model: '', isAutoRequest: null, message: '', requestName: '', params: [], data: [] }
    },
    _addRequest: function() {
      const Item = deepCopy(this.requestItem)
      Item['params'] = JSON.stringify(Item['params'])
      Item['data'] = JSON.stringify(Item['data'])
      Item['isAutoRequest'] = Item['isAutoRequest'] ? 1 : 0
      console.log(Item)
      xhrAddRequest(Item)
        .then(resp => {
          this.$message.success('添加成功')
          // this.reloadPage(this.fromId)
          this.dialogFormVisible = false
          this.doSearch()
        })
        .catch(err => {
          this.$message.error(err)
          this.dialogFormVisible = false
        })
      this.requestDialog = false
    },
    handleRequestEditClicked(row) {
      console.log(row)
      this.requestItem = deepCopy(row)
      this.requestItem.params = JSON.parse(row.params)
      this.requestItem.data = JSON.parse(row.data)
      this.requestDialog = true
    },
    deleteRequestParam(item) {
      const params = this.requestItem.params
      const index = params.indexOf(item)
      if (index >= 0) {
        params.splice(index, 1)
      }
    },
    deleteBodyParam(item) {
      const params = this.requestItem.data
      const index = params.indexOf(item)
      if (index >= 0) {
        params.splice(index, 1)
      }
    }
  }
}
</script>

<style scoped>

</style>
